<template>
	<view >
		<navSearchBar title="筛选" ></navSearchBar>
		<scroll-view class="select-field">
			<view class="select-item">
				<view class="title">列表排序</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in sortData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'SORT')?'active-style':'']" @click="selectSearch(item,'SORT')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">案例分类</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in baseTypeList" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'TYPE')?'active-style':'']" @click="selectSearch(item,'TYPE')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">所在区域</view>
				<view class="select-item-body-area-type">
					<view v-for="(item,index) in areaList" :key="index" class="text-body" :class="[index==0?'text-body-4':'area-type',activeHandle(item,'AREA')?'active-style':'']" @click="selectSearch(item,'AREA')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">客户行业</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in industryData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'INDUSTY')?'active-style':'']" @click="selectSearch(item,'INDUSTY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item" v-if="searchData['industry_id']!==''">
				<view class="title">细分行业</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in industryDetailData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'INDUSTY_DETAIL')?'active-style':'']" @click="selectSearch(item,'INDUSTY_DETAIL')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">活动人数</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in personNumberData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'PERSONNMUBER')?'active-style':'']" @click="selectSearch(item,'PERSONNMUBER')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">活动时间</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in activityTimeData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'ACTIVITY_TIME')?'active-style':'']" @click="selectSearch(item,'ACTIVITY_TIME')">
						<text>{{item.text}}</text>
					</view>
				</view>
				<view class="text-body select-time" @click="openCustomTime" :class="[customTimeText!=='自定义选择日期'?'active-style':'']"><text>{{customTimeText}}</text></view>
			</view>
			<view class="select-item">
				<view class="title">案例内容</view>
				<view class="select-item-body select-item-body-4">
					<view v-for="(item,index) in sampleContentTypeData" :key="index" class="text-body text-body-4" :class="[activeHandle(item,'TYPE_CONTENT')?'active-style':'']" @click="selectSearch(item,'TYPE_CONTENT')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
			<view class="footer">
				<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="442rpx" height="72rpx" @click="comfireSearch">确定筛选</tn-button>
				<tn-button class="right-button" margin="0 0 0 20rpx" fontSize="24" border  backgroundColor="#F7F8FC" fontColor="#000000" width="230rpx" height="72rpx" @click="cancel">清空条件</tn-button>
			</view>
		</scroll-view>
		<tn-popup v-model="maskVisible" mode="bottom" :negativeTop="negativeTop" closeBtn>
		  <view class="popup-field" >
		  	<view class="title">选择日期范围</view>
			<view class="tn-flex middle_field tn-flex-col-center">
				<tn-input class="input" placeholder="开始时间"  inputAlign="center" v-model="startTime" @click="openStartTime" disabled></tn-input>
				<view class="line">-</view>
				<tn-input class="input-end input" placeholder="结束时间"  inputAlign="center" v-model="endTime"  @click="openEndTime" disabled></tn-input>
			</view>
			<view class="tn-flex footer">
				<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="280rpx" height="72rpx" @click="customTimeConfirm">确定</tn-button>
				<tn-button class="right-button" fontBold fontSize="32" backgroundColor="#F7F8FC" fontColor="#000000" width="280rpx" height="72rpx" @click="cancelCustom">取消</tn-button>
			</view>
		  </view>
		</tn-popup>
		<tn-picker mode="multiSelector" v-model="areaShow"  :range="areaData" rangeKey="title" :defaultSelector="initAreaData" @columnchange="areaColumnchange" @confirm="areaConfirm"></tn-picker>
		<tn-picker mode="multiSelector" v-model="timeShow"  :range="timeRangeData" rangeKey="title" :defaultSelector="initStartTime" @columnchange="startTimeColumnchange" @confirm="startTimeConfirm"></tn-picker>
		<tn-picker mode="multiSelector" v-model="endTimeShow"  :range="endTimeRangeData" rangeKey="title" :defaultSelector="initEndTime" @columnchange="endTimeColumnchange" @confirm="endTimeConfirm"></tn-picker>
	</view>
</template>

<script>
	const SORT = 'SORT';
	const BASETYPE = 'TYPE';
	const AREA = 'AREA';
	const INDUSTY = 'INDUSTY';
	const INDUSTY_DETAIL = 'INDUSTY_DETAIL';
	const PERSONNMUBER = 'PERSONNMUBER';
	const TYPE_CONTENT = 'TYPE_CONTENT';
	const ACTIVITY_TIME = 'ACTIVITY_TIME';
	export default {
		data() {
			return {
				sortData:[],
				searchData:{
					order:'',
					// conference_total:'',
					// stay_total:'',
					// accommodate_total:'',
					// cooperation_level:'',
					// star_level:'',
					region_id:'',
					province_id:'',
					city_id:'',
					category_id:''
					},
				baseTypeList:[],
				areaList:[{text:'不限',value:''},{text:'请选择区域',value:1}],
				personNumberData:[],
				// cooperationLevelData:[],
				// cateringCapacityData:[],
				// stayCapacityData:[],
				// meetingCapacityData:[],
				maskVisible:false,
				personNum:'',
				negativeTop:0,
				areaData:[[{ title: "不限", id:''}],[{ title: "不限", id:''}],[{ title: "不限", id:''}]],
				initAreaData:[0,0,0],
				areaShow:false,
				industryData:[],
				industryDetailData:[],
				sampleContentTypeData:[],
				activityTimeData:[],
				startTime:'',
				endTime:'',
				timeRangeData:[],
				timeShow:false,
				endTimeShow:false,
				endTimeRangeData:[],
				initStartTime:[],
				initEndTime:[],
				customTimeText:'自定义选择日期'
			}
		},
		onLoad(){
			console.log('onLoadfilter',this.$Route.query)
			const {sortData,personNumberData,searchData} = this.$Route.query;
			this.sortData = sortData;
			this.personNumberData = personNumberData;
			
			this.searchData = searchData;
			console.log('searchdata',searchData)
			if(this.searchData['areaText']){
				this.areaList[1].text = this.searchData['areaText'];
			}
			if(this.searchData['activityTimeText']) {
				this.customTimeText = this.searchData['activityTimeText'];
			}
			
			this.getBaseTypeList();
			this.getIndustyData(0);
			if(this.searchData.industry_id !== ''){
				this.getIndustyData(this.searchData.industry_id,1);
			}
			this.getSampleContentType();
			this.getActivityTime();
			uni.onKeyboardHeightChange(res => {
			  console.log('高度uuuuuu',res.height)
			})
			this.getAreaList(0);
		},
		methods: {
			areaConfirm(data){
				console.log('datatatata',data)
				let proviceData = this.areaData[0][data[0]];
				let cityData = this.areaData[1][data[1]];
				let regionData = this.areaData[2][data[2]];
				this.searchData['province_id'] = proviceData.id;
				this.searchData['city_id'] = cityData.id;
				this.searchData['region_id'] = regionData.id;
				if(this.searchData['province_id'] !== ''){
					this.areaText = proviceData.title;
				}
				if(this.searchData['city_id'] !== ''){
					this.areaText += '/'+ cityData.title;
				}
				if(this.searchData['region_id'] !== ''){
					this.areaText += '/'+ regionData.title;
				}
				if(this.areaText){
					this.areaList[1].text = this.areaText;
				}
				this.searchData['areaText'] = this.areaText;
			},
			areaColumnchange({column, index}){
				console.log('column',column,index);
				let parentId = this.areaData[column][index].id;
				if(column < 2){
					this.getAreaList(parentId, column+1);
				}
				this.$set(this.initAreaData,column,index);
			},
			startTimeConfirm(data){
				console.log('datataatatat',data)
				let year = this.timeRangeData[0][data[0]].title;
				let month = this.timeRangeData[1][data[1]].title;
				let date = this.timeRangeData[2][data[2]].title;
				this.startTime = year+'年'+month+'月'+date+'日';
				this.startTimeStamp = Date.parse(year+'/'+month+'/'+date);
			},
			endTimeConfirm(data){
				let year = this.endTimeRangeData[0][data[0]].title;
				let month = this.endTimeRangeData[1][data[1]].title;
				let date = this.endTimeRangeData[2][data[2]].title;
				this.endTime = year+'年'+month+'月'+date+'日';
				this.endTimeStamp = Date.parse(year+'/'+month+'/'+date);
			},
			getMonthsInYear(year) {
			  let months = [];
			  for (let i = 1; i <= 12; i++) {
				  console.log('rizisuandebudi',year,i,new Date(year, i, 0).getDate())
			    months.push({title:i,date:new Date(year, i, 0).getDate()});
			  }
			  return months;
			},
			startTimeColumnchange({column, index}){
				console.log('startTimeColumnchange1111',column,index)
				let year = 0;
				
				if(column == 0){
					year = parseInt(this.timeRangeData[column][index].title);
					let month = this.getMonthsInYear(year);
					
					this.$set(this.timeRangeData,column + 1, month);
				}
				if(column == 1){
					let monthData = this.timeRangeData[column][index];
					let dateData = [];
					
					for(let i = 1 ; i <= monthData.date; i++){
						dateData.push({title:i})
					}
					console.log('startTimeColumnchange222',dateData)
					this.$set(this.timeRangeData,column + 1,dateData);
				}
				this.$set(this.initStartTime,column,index);
				
				
			},
			endTimeColumnchange({column, index}){
				let year = 0;
				
				if(column == 0){
					year = parseInt(this.endTimeRangeData[column][index].title);
					let month = this.getMonthsInYear(year);
					
					this.$set(this.endTimeRangeData,column + 1, month);
				}
				if(column == 1){
					let monthData = this.endTimeRangeData[column][index];
					let dateData = [];
					
					for(let i = 1 ; i <= monthData.date; i++){
						dateData.push({title:i})
					}
					console.log('startTimeColumnchange222',dateData)
					this.$set(this.endTimeRangeData,column + 1,dateData);
				}
				this.$set(this.initEndTime,column,index);
			},
			getAreaList(parentId,column=0){
				this.$http.get('/api/common/area/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.areaData,column,data)
						console.log('ccccccccc',this.areaData)
						
					} else {
						
					}
					
				})
			},
			getSampleContentType(type){
				this.$http.get('/api/dictionary/data',{title:'content_type'}).then((res) => {
					if(res.data.status == 200) {
						this.sampleContentTypeData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.sampleContentTypeData.unshift({text:'不限',value:''});
						// this.cateringCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
						
					}
				})
			},
			getIndustyData(parentId,column=0){
				this.$http.get('/api/industry/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						if(column == 0){
							this.industryData = data.map((el) =>{
								el.text = el.title;
								el.value = el.id;
								return el;
							});
						} else {
							this.industryDetailData = data.map((el) =>{
								el.text = el.title;
								el.value = el.id;
								return el;
							});
						}
						
						
						
					} else {
						
					}
					
				})
			},
			getActivityTime(){
				this.$http.get('/api/dictionary/data',{title:'time_cycle'}).then((res) => {
					if(res.data.status == 200) {
						this.activityTimeData = res.data.data||[];
						this.activityTimeData.unshift({text:'不限',value:''});
						// this.activityTimeData.push({text:'自定义选择日期',value:'custom',type:'custom'});
					}
				})
			},
			getBaseTypeList() {
				this.$http.get('/api/business/example/category/select').then((res) => {
					if(res.data.status == 200) {
						this.baseTypeList = res.data.data||[];
						this.baseTypeList.map((el)=>{el.text = el.title;el.value = el.id;return el})
						this.baseTypeList.unshift({text:'全部案例',value:''});
					}
				})
			},
			openCustomTime(){
				this.maskVisible = true;
				this.startTime = '';
				this.endTime = '';
				this.startTimeStamp = 0;
				this.endTimeStamp = 0;
			},
			activeHandle(item,type){
				if(type == SORT) {
					return item.value === this.searchData['order']
				} else if (type == INDUSTY) {
					return item.value === this.searchData['industry_id']
				} else if(type == INDUSTY_DETAIL){
					return item.value === this.searchData['industry_detail_id']
				} else if(type == PERSONNMUBER){
					return item.value === this.searchData['activity_total']
				} else if(type == TYPE_CONTENT){
					return item.value === this.searchData['type']
				}
				else if(type == ACTIVITY_TIME){
					return item.value === this.searchData['activity_time']
				}else if(type == BASETYPE){
					return item.value === this.searchData['category_id']
				}else if(type == AREA){
					if(this.searchData['province_id']&&item.value){
						return true;
					}
					if(!this.searchData['province_id']&&!item.value){
						return true;
					}
					return false;
				}
			},
			selectSearch(item,type){
				
				if(type == SORT) {
					this.searchData['order'] = item.value;
				} else if (type == INDUSTY) {
					this.searchData['industry_id'] = item.value;
					
				} else if(type == INDUSTY_DETAIL){
					this.searchData['industry_detail_id'] = item.value;
				} else if(type == PERSONNMUBER){
					
						this.searchData['activity_total'] = item.value;
					
				}else if(type == TYPE_CONTENT){
					
						this.searchData['type'] = item.value;
					
				}else if(type == ACTIVITY_TIME){
						
						this.searchData['activity_time'] = item.value;
						this.customTimeText = '自定义选择日期';
						this.searchData['activityTimeText'] = '';
					
				}else if(type == BASETYPE){
						this.searchData['category_id'] = item.value;
				}else if(type == AREA){
					if(item.value !== '') {
						this.areaShow = true;
					} else {
						this.searchData['province_id'] = '';
						this.searchData['city_id'] = '';
						this.searchData['region_id'] = '';
						this.areaList[1].text = '请选择区域';
						this.searchData['areaText'] = '';
					}
				}
				
				
			},
			openStartTime(){
				this.timeShow = true;
				this.timeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
			
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.timeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.timeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.timeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initStartTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			openEndTime(){
				this.endTimeShow = true;
				this.endTimeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
							
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.endTimeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.endTimeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.endTimeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initEndTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			customTimeConfirm(){
				if(!(this.startTime&&this.endTime)){
					this.$tip.toast('请选择日期')
					return;
				}
				if(this.endTimeStamp - this.startTimeStamp < 0){
					this.$tip.toast('结束时间应小于开始时间')
					return;
				}
				
				this.maskVisible = false;
				this.customTimeText = this.startTime +'-'+this.endTime;
				let startTime = new Date(this.startTimeStamp).Format('yyyy-MM-dd');
				let endTime = new Date(this.endTimeStamp).Format('yyyy-MM-dd');
				console.log('wwwwwwww',startTime,this.startTimeStamp)
				this.searchData['activity_time'] = startTime+' ' +endTime;
				this.searchData['activityTimeText'] = this.customTimeText;
				
			},
			comfireSearch(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.searchData = this.searchData;
				console.log('filter11111111',prevPage)
				
				this.$Router.back();
			},
			cancelCustom(){
				this.maskVisible = false;
			},
			cancel(){
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
				this.customTimeText = '自定义选择日期';
				this.areaList[1].text = '请选择区域';
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-field{
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		background-color:#FFFFFF;
		padding-top:10rpx;
		.select-item{
			padding:30rpx;
			.title{
				color:#616571;
				font-size: 32rpx;
				font-weight: $Semibold;
				margin-bottom: 30rpx;
				line-height: 32rpx;
			}
			.select-item-body{
				display: grid;
				grid-row-gap: 30rpx;
			}
			.select-item-body-3{
				grid-column-gap: 16rpx;
				grid-template-columns: auto auto auto;
			}
			.select-item-body-4{
				grid-column-gap: 20rpx;
				grid-template-columns: auto auto auto auto;
			}
			.text-body{
				text-align: center;
				line-height: 72rpx;
				font-size: 24rpx;
				color:#6F6F6F;
				background-color: #F7F8FC;
				border-radius: 10rpx;
			}
			.text-body-3{
				
				width: 220rpx;
				height: 72rpx;
				
			}
			.text-body-4{
				
				width: 160rpx;
				height: 72rpx;
				
			}
			.active-style{
				border: 2rpx solid #FFA457;
				background-color: #FDF1E5;
				color: #EE8731;
			}
			.select-item-body-area-type{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.area-type{
					flex:1;
					margin-left: 20rpx;
				}
			}
			.select-time{
				
					margin-top:30rpx;
				
			}
		}
		.footer{
			width: 100%;
			padding:10rpx 28rpx calc(env(safe-area-inset-bottom) + 30rpx) 30rpx ;
			// display: flex;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			height: calc(112rpx + env(safe-area-inset-bottom));
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			/deep/.tn-btn-class{
				vertical-align: middle;
			}
			.right-button{
				/deep/.tn-btn-class{
					margin-left: 20rpx;
					border: 2rpx solid #CACACA;
				}
			}
			
			
		}
	}
	.popup-field{
		padding:80rpx 60rpx 60rpx;
		.title{
			font-size: 40rpx;
			color:#616571;
			text-align: center;
			
		}
		.middle_field{
			padding:60rpx 0;
			color:#6F6F6F;
		}
		// .input{
			
		// 	width: 100%;
			/deep/.tn-input{
				border-radius: 10rpx;
				background-color: #F7F8FC;
			}
		// }
		.line{
			margin:0 26rpx;
			width:16rpx;
		}
		.footer{
			// padding:0 28rpx 0 30rpx;
			// display: flex;
			.right-button{
				/deep/.tn-btn-class{
					border:2rpx solid #CACACA!important;
					margin-left: 70rpx;
					
				}
			}
			
			
		}
	}
</style>
